• Docs
  • Ecosystem
  • Tutorial
  • Blog
  • GitHub
  • @QwikDev
  • Discord
👏 Add new examples
OSZAR »
\n \n );\n};\n",{"path":"3p","code":"3q"},["3l","3o","3r"],{"id":"3f","title":"3g","description":"3h","icon":"3i","inputs":"3s"},"Input","Examples","Output","Console","introduction/runtime-less","Runtime-less","An interactive app without runtime.","🪶","import { component$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n console.log('render ');\n return (\n
\n {\n // The click handler is completely stateless, and does not use any QWIK api.\n // Meaning, the qwik runtime is NEVER downloaded, nor executed\n console.log('click');\n const div = document.querySelector('#container')! as HTMLElement;\n if (div.style.background === 'yellow') {\n div.style.background = 'red';\n } else {\n div.style.background = 'yellow';\n }\n }}\n >\n Action\n \n
\n );\n});\n",{"path":"3j","code":"42"},{"path":"3m","code":"3n"},{"path":"3p","code":"3q"},["43","44","45"],{"id":"3y","title":"3z","description":"40","icon":"41","inputs":"46"},"reactivity/task","Simple useTask()","Learn how to react to changes in variables.","👀","import { component$, useTask$, useStore } from '@builder.io/qwik';\n\ninterface State {\n count: number;\n debounced: number;\n}\n\nexport default component$(() => {\n const store = useStore({\n count: 0,\n debounced: 0,\n });\n\n useTask$(({ track }) => {\n // track changes in store.count\n track(() => store.count);\n console.log('count changed');\n\n const timer = setTimeout(() => {\n store.debounced = store.count;\n }, 2000);\n return () => {\n clearTimeout(timer);\n };\n });\n\n console.log(' renders');\n return (\n
\n \n \n
\n );\n});\n\nexport const Child = component$((props: { state: State }) => {\n console.log(' render');\n return (\n
\n
{props.state.count}
\n \n
\n );\n});\n\nexport const GrandChild = component$((props: { state: State }) => {\n console.log(' render');\n return
Debounced: {props.state.debounced}
;\n});\n",{"path":"3j","code":"4c"},{"path":"3m","code":"3n"},{"path":"3p","code":"3q"},["4d","4e","4f"],{"id":"48","title":"49","description":"4a","icon":"4b","inputs":"4g"},"reactivity/counter","Counter","A simple standard counter example.","⏲","import { component$, useStore } from '@builder.io/qwik';\n\nexport default component$(() => {\n const store = useStore({ count: 0 });\n\n return (\n
\n

Count: {store.count}

\n

\n \n

\n
\n );\n});\n",{"path":"3j","code":"4m"},{"path":"3m","code":"3n"},"import App from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Counter\n \n \n \n
OSZAR »
\n \n );\n};\n",{"path":"3p","code":"4p"},["4n","4o","4q"],{"id":"4i","title":"4j","description":"4k","icon":"4l","inputs":"4r"},"reactivity/auto-complete","Auto-complete","Auto-complete searching for Star Wars characters using the SWAPI API","🎬","import { component$, useStore, useTask$ } from '@builder.io/qwik';\n\nexport default component$(() => {\n return (\n
\n This example features an auto-complete component with a debounce of 150 ms.\n
\n The function `debouncedGetPeople` needs to be exported because it is used in `useTask$`.\n
\n
\n Go ahead, search for Star Wars characters such as \"Luke Skywalker\", it uses the{' '}\n Star Wars API\n \n
\n );\n});\n\ninterface IState {\n searchInput: string;\n searchResults: string[];\n selectedValue: string;\n}\n\nexport const AutoComplete = component$(() => {\n const state = useStore({\n searchInput: '',\n searchResults: [],\n selectedValue: '',\n });\n\n useTask$(async ({ track }) => {\n const searchInput = track(() => state.searchInput);\n\n if (!searchInput) {\n state.searchResults = [];\n return;\n }\n\n const controller = new AbortController();\n state.searchResults = await debouncedGetPeople(state.searchInput, controller);\n\n return () => {\n controller.abort();\n };\n });\n\n return (\n
\n (state.searchInput = el.value)} />\n \n
\n );\n});\n\nexport const SuggestionsListComponent = (props: { state: IState }) => {\n const searchResults = props.state.searchResults;\n return searchResults?.length ? (\n
    \n {searchResults.map((suggestion) => {\n return
  • (props.state.selectedValue = suggestion)}>{suggestion}
    • ;\n })}\n
\n ) : (\n

\n No suggestions, you re on your own!\n

\n );\n};\n\nconst getPeople = (searchInput: string, controller?: AbortController): Promise =>\n fetch(`https://swapi.dev/api/people/?search=${searchInput}`, {\n signal: controller?.signal,\n })\n .then((response) => {\n return response.json();\n })\n .then((parsedResponse) => {\n return parsedResponse.results.map((people: { name: string }) => people.name);\n });\n\nfunction debounce any>(fn: F, delay = 500) {\n let timeoutId: ReturnType;\n\n return (...args: Parameters): Promise> => {\n return new Promise((resolve) => {\n if (timeoutId) clearTimeout(timeoutId);\n timeoutId = setTimeout(() => {\n resolve(fn(...(args as any[])));\n }, delay);\n });\n };\n}\n\nexport const debouncedGetPeople = debounce(getPeople, 150);\n",{"path":"3j","code":"4x"},{"path":"3m","code":"3n"},"import App from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Auto-complete example using Qwik\n \n \n \n
OSZAR »
\n \n );\n};\n",{"path":"3p","code":"50"},["4y","4z","51"],{"id":"4t","title":"4u","description":"4v","icon":"4w","inputs":"52"},"visibility/clock","Below the fold Clock","Component which requires lazy initialization when it comes into view.","⏰","import { component$, useStore, useStyles$, useVisibleTask$ } from '@builder.io/qwik';\nimport styles from './clock.css?inline';\n\nexport default component$(() => {\n const items = new Array(60).fill(null).map((_, index) => 'item ' + index);\n\n console.log('PARENT');\n return (\n
\n

console.log('test')}>\n This is an example of Lazy executing code on component when component becomes visible.\n

\n\n

\n ⬇️ Scroll down until the clock is in view.\n

\n\n
    \n {items.map((i) => (\n
  • {i}
    • \n ))}\n
\n\n \n
\n );\n});\n\nexport const Clock = component$(() => {\n useStyles$(styles);\n\n const store = useStore({\n hour: 0,\n minute: 0,\n second: 0,\n });\n\n useVisibleTask$(() => {\n const update = () => {\n const now = new Date();\n store.second = now.getSeconds() * (360 / 60);\n store.minute = now.getMinutes() * (360 / 60);\n store.hour = now.getHours() * (360 / 12);\n };\n update();\n const tmrId = setInterval(update, 1000);\n return () => clearInterval(tmrId);\n });\n\n console.log('Render Clock');\n return (\n
\n
\n
\n
\n
\n
\n
\n
\n
\n );\n});\n",{"path":"3j","code":"58"},"/clock.css","/* Clock inspired by: https://paulund.co.uk/create-a-clock-in-css */\n\n.clock {\n background: #fff;\n border: 10px solid #7a7a7a;\n border-radius: 50%;\n box-sizing: border-box;\n height: 300px;\n margin: 0 auto;\n position: relative;\n width: 300px;\n}\n\n.twelve,\n.three,\n.six,\n.nine {\n background: #333;\n position: absolute;\n}\n\n.twelve,\n.six {\n height: 10px;\n width: 4px;\n}\n\n.three,\n.nine {\n height: 4px;\n width: 10px;\n}\n\n.twelve {\n left: 50%;\n top: -1px;\n}\n\n.three {\n right: -1px;\n top: 50%;\n}\n\n.six {\n left: 50%;\n bottom: -1px;\n}\n\n.nine {\n left: -1px;\n top: 50%;\n}\n\n.hour {\n height: 60px;\n width: 4px;\n background: #333;\n position: absolute;\n left: 50%;\n top: 80px;\n animation: tick 43200s infinite linear;\n -webkit-animation: tick 43200s infinite linear;\n}\n\n.minute {\n height: 100px;\n width: 4px;\n background: #777;\n position: absolute;\n left: 50%;\n top: 40px;\n animation: tick 3600s infinite linear;\n -webkit-animation: tick 3600s infinite linear;\n}\n\n.second {\n height: 120px;\n width: 3px;\n background: #fc0505;\n position: absolute;\n left: 50%;\n top: 20px;\n animation: tick 60s infinite linear;\n -webkit-animation: tick 60s infinite linear;\n}\n\n.hour,\n.minute,\n.second {\n transform-origin: 2px 100%;\n -webkit-transform-origin: 2px 100%;\n}\n",{"path":"5a","code":"5b"},{"path":"3m","code":"3n"},"import App from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Clock\n \n \n \n
OSZAR »
\n \n );\n};\n",{"path":"3p","code":"5e"},["59","5c","5d","5f"],{"id":"54","title":"55","description":"56","icon":"57","inputs":"5g"},"partial/hackernews-index","HackerNews","HackerNews landing page.","📰","import { component$, useTask$, useStore, useStyles$ } from '@builder.io/qwik';\nimport { isServer } from '@builder.io/qwik';\nimport HackerNewsCSS from './hacker-news.css?inline';\n\nexport const HackerNews = component$(() => {\n useStyles$(HackerNewsCSS);\n const store = useStore({ data: null });\n\n useTask$(async () => {\n if (isServer) {\n const response = await fetch('https://node-hnapi.herokuapp.com/news?page=0');\n store.data = await response.json();\n }\n });\n\n return (\n
\n
\n );\n});\n\nexport const Nav = component$(() => {\n return (\n \n );\n});\n\nexport const Stories = component$<{ data: any }>((props) => {\n const page = 1;\n const type = 'list';\n const stories = props.data;\n return (\n
\n
\n {page > 1 ? (\n \n {'<'} prev\n \n ) : (\n \n {'<'} prev\n \n )}\n page {page}\n {stories && stories.length >= 29 ? (\n \n more {'>'}\n \n ) : (\n \n more {'>'}\n \n )}\n
\n
\n {stories && (\n
    \n {stories.map((story: IStory) => (\n \n ))}\n
\n )}\n
\n
\n );\n});\n\nexport const StoryPreview = component$<{ story: IStory }>((props) => {\n return (\n
  • \n {props.story.points}\n \n {props.story.url && !props.story.url.startsWith('item?id=') ? (\n <>\n \n {props.story.title}\n \n ({props.story.domain})\n \n ) : (\n {props.story.title}\n )}\n \n
    \n \n {props.story.type !== 'job' ? (\n <>\n by {props.story.user} {props.story.time_ago}{' '}\n |{' '}\n \n {props.story.comments_count ? `${props.story.comments_count} comments` : 'discuss'}\n \n \n ) : (\n {props.story.time_ago}\n )}\n \n {props.story.type !== 'link' && (\n <>\n {' '}\n {props.story.type}\n \n )}\n
    • \n );\n});\n\nexport interface IComment {\n id: string;\n user: string;\n time_ago: string;\n content: string;\n comments: IComment[];\n}\n\nexport interface IStory {\n id: string;\n points: string;\n url: string;\n title: string;\n domain: string;\n type: string;\n time_ago: string;\n user: string;\n comments_count: number;\n comments: IComment[];\n}\n",{"path":"3j","code":"5m"},{"path":"3m","code":"3n"},"/hacker-news.css",".hacker-news {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,\n 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n font-size: 15px;\n background-color: #f2f3f5;\n margin: 0;\n padding-top: 55px;\n color: #34495e;\n overflow-y: scroll;\n}\na {\n color: #34495e;\n text-decoration: none;\n}\n.header {\n background-color: #335d92;\n position: fixed;\n z-index: 999;\n height: 55px;\n top: 0;\n left: 0;\n right: 0;\n}\n.header .inner {\n max-width: 800px;\n box-sizing: border-box;\n margin: 0 auto;\n padding: 15px 5px;\n}\n.header a {\n color: rgba(255, 255, 255, 0.8);\n line-height: 24px;\n display: inline-block;\n vertical-align: middle;\n font-weight: 300;\n letter-spacing: 0.075em;\n margin-right: 1.8em;\n}\n.header a:hover {\n color: #fff;\n}\n.header a.active {\n color: #fff;\n font-weight: 400;\n}\n.header a:nth-child(6) {\n margin-right: 0;\n}\n.header .github {\n color: #fff;\n font-size: 0.9em;\n margin: 0;\n float: right;\n}\n.logo {\n width: 24px;\n margin-right: 10px;\n display: inline-block;\n vertical-align: middle;\n}\n.view {\n max-width: 800px;\n margin: 0 auto;\n position: relative;\n}\n@media (max-width: 860px) {\n .header .inner {\n padding: 15px 30px;\n }\n}\n@media (max-width: 600px) {\n .header .inner {\n padding: 15px;\n }\n .header a {\n margin-right: 1em;\n }\n .header .github {\n display: none;\n }\n}\n.news-view {\n padding-top: 45px;\n}\n.news-list,\n.news-list-nav {\n background-color: #fff;\n border-radius: 2px;\n}\n.news-list-nav {\n padding: 15px 30px;\n position: fixed;\n text-align: center;\n top: 55px;\n left: 0;\n right: 0;\n z-index: 998;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n.news-list-nav .page-link {\n margin: 0 1em;\n}\n.news-list-nav .disabled {\n color: #aaa;\n}\n.news-list {\n position: absolute;\n margin: 30px 0;\n width: 100%;\n}\n.news-list ul {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n@media (max-width: 600px) {\n .news-list {\n margin: 10px 0;\n }\n}\n.news-item {\n background-color: #fff;\n padding: 20px 30px 20px 80px;\n border-bottom: 1px solid #eee;\n position: relative;\n line-height: 20px;\n}\n.news-item .score {\n color: #335d92;\n font-size: 1.1em;\n font-weight: 700;\n position: absolute;\n top: 50%;\n left: 0;\n width: 80px;\n text-align: center;\n margin-top: -10px;\n}\n.news-item .host,\n.news-item .meta {\n font-size: 0.85em;\n color: #626262;\n}\n.news-item .host a,\n.news-item .meta a {\n color: #626262;\n text-decoration: underline;\n}\n.news-item .host a:hover,\n.news-item .meta a:hover {\n color: #335d92;\n}\n.item-view-header {\n background-color: #fff;\n padding: 1.8em 2em 1em;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);\n}\n.item-view-header h1 {\n display: inline;\n font-size: 1.5em;\n margin: 0;\n margin-right: 0.5em;\n}\n.item-view-header .host,\n.item-view-header .meta,\n.item-view-header .meta a {\n color: #626262;\n}\n.item-view-header .meta a {\n text-decoration: underline;\n}\n.item-view-comments {\n background-color: #fff;\n margin-top: 10px;\n padding: 0 2em 0.5em;\n}\n.item-view-comments-header {\n margin: 0;\n font-size: 1.1em;\n padding: 1em 0;\n position: relative;\n}\n.item-view-comments-header .spinner {\n display: inline-block;\n margin: -15px 0;\n}\n.comment-children {\n list-style-type: none;\n padding: 0;\n margin: 0;\n}\n@media (max-width: 600px) {\n .item-view-header h1 {\n font-size: 1.25em;\n }\n}\n.comment-children .comment-children {\n margin-left: 1.5em;\n}\n.comment {\n border-top: 1px solid #eee;\n position: relative;\n}\n.comment .by,\n.comment .text,\n.comment .toggle {\n font-size: 0.9em;\n margin: 1em 0;\n}\n.comment .by {\n color: #626262;\n}\n.comment .by a {\n color: #626262;\n text-decoration: underline;\n}\n.comment .text {\n overflow-wrap: break-word;\n}\n.comment .text a:hover {\n color: #335d92;\n}\n.comment .text pre {\n white-space: pre-wrap;\n}\n.comment .toggle {\n background-color: #fffbf2;\n padding: 0.3em 0.5em;\n border-radius: 4px;\n}\n.comment .toggle a {\n color: #626262;\n cursor: pointer;\n}\n.comment .toggle.open {\n padding: 0;\n background-color: transparent;\n margin-bottom: -0.5em;\n}\n.user-view {\n background-color: #fff;\n box-sizing: border-box;\n padding: 2em 3em;\n}\n.user-view h1 {\n margin: 0;\n font-size: 1.5em;\n}\n.user-view .meta {\n list-style-type: none;\n padding: 0;\n}\n.user-view .label {\n display: inline-block;\n min-width: 4em;\n}\n.user-view .about {\n margin: 1em 0;\n}\n.user-view .links a {\n text-decoration: underline;\n}\n",{"path":"5p","code":"5q"},"import { HackerNews } from './app';\n\nexport const Root = () => {\n return (\n <>\n \n Hacker News\n \n \n \n
    OSZAR »
    \n \n );\n};\n",{"path":"3p","code":"5s"},["5n","5o","5r","5t"],{"id":"5i","title":"5j","description":"5k","icon":"5l","inputs":"5u"},{"panelStore":"w!"},"\u0012#1l","\u0002q-q0YFrO62.js#s_AqHBIVNKf34[5x c! e!]","\u00031 3 5y #1k","\u0002q-q0YFrO62.js#s_eePwnt3YTI8[4! e!]","\u00031 4 60 #1k","\u0002q-q0YFrO62.js#s_ycCVz0gorPI[2y 36 37]","\u0002q-B-Gbqhmj.js#s_VnRMo7OMXyo","s7pbyy-0","\u0002q-Bk7CedWW.js#s_rQT2WX0s7cQ","m9eern-0","\u0002q-q0YFrO62.js#s_jTsKhAld0Tw","\u0002q-q0YFrO62.js#s_rVWNrK4uTuI","6pna6-0","\u0001"],"subs":[["_1"],["1 #3 1b #2 href url","0 #2 url","0 #a url"],["0 1m"],["0 1m"],["_1","1 #6 1p #0 class headerMenuOpen","1 #6 1p #0 class sideMenuOpen","3 #m 1q #m theme","1 #n 1s #k aria-label theme"],["_1","0 #2"],["_1","0 #2"],["_1","0 #2"],["_1"],["_1","1 #3 1b #2 href canonical"],["_1","0 #2 title","0 #2 meta","0 #2 links","0 #2 styles","1 #3 1b #2 href frontmatter"],["0 #7"],["0 25 input","0 27 input","0 27 store"],["_1"],["_1","0 25 editor","0 27 editor"],["_1"],["_1"],["_1"],["_1","0 #13"],["_1","0 #13"],["_1"],["_1","0 #1e"],["_1","0 15 serverWindow","0 #13 diagnostics","0 #13 monacoDiagnostics","0 #13 enableHtmlOutput","0 #13 enableClientOutput","0 #13 enableSsrOutput","0 #13 isLoading","0 #13 serverUrl","0 #13 selectedOutputPanel","1 #1b 1v #13 class selectedOutputPanel","0 #11 selectedOutputDetail","0 #1e events","0 27 selectedInputPath"],["_1","0 #11"],["_1","0 z appId","0 11 buildId","0 11 buildMode","0 11 entryStrategy","0 11 files","0 11 version","0 #8 appId","0 2e files","0 15 buildId","0 15 buildMode","0 15 entryStrategy","0 15 files","0 15 version","0 15 debug","0 #11 files","0 25 version","1 #1a 2f #13 class buildMode","1 #1a 2f #13 class buildMode","0 27 version","0 27 files"],["1 #q 2t #p class"],["_1"],["_1"],["_1"],["_1"],["0 #p","2 #s u #t bind:show","0 39","0 3b","1 #1n 3c #1m data-state","1 #1n 3d #1m data-open","1 #1n 3e #1m data-closed"],["_1","0 #1f"],["_1","0 #8 active","0 #1f list","0 #1f active"],["0 #1e store"]]}